import { listTophubRank } from '@/services/api/api-tophub-rank';
import { ProColumns, ProTable } from '@ant-design/pro-components';
import { ActionType } from '@ant-design/pro-table';
import { Badge, Space, Tabs } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { useAccess } from 'umi';
import styles from './ListRankStyle.less';

interface ListRankProps {
  createdTimes: string[];
  clear: boolean;
  onSelect: (value: TophubRankData.RankListSo) => void;
  onReset: () => void;
  onRefurbish: () => void;
  extra?: React.ReactNode;
}

const ListRank: React.FC<ListRankProps> = ({
  createdTimes,
  clear,
  onSelect,
  onReset,
  onRefurbish,
  extra,
}) => {
  const access = useAccess();
  const actionRef = useRef<ActionType>();

  const [tabKey, settabKeyState] = useState<string>('all');

  const [selectRankSourceId, setSelectRankSourceIdState] = useState<string>('');

  const columns: ProColumns<TophubRankData.RankListSo>[] = [
    {
      title: '排名',
      align: 'center',
      dataIndex: 'index',
      valueType: 'indexBorder',
      render: (dom, entity, index, action) => {
        if (index == 0) {
          return <Badge count={1} showZero color="#ff5e57" />;
        } else if (index == 1) {
          return <Badge count={2} color="#ffd32a" />;
        } else if (index == 2) {
          return <Badge count={3} color="#7bed9f" />;
        } else {
          return dom;
        }
      },
    },
    {
      title: '账号',
      key: 'sourceName',
      dataIndex: 'sourceName',
      align: 'center',
      render: (dom, entity, item) => {
        return <Space>{entity.sourceName}</Space>;
      },
    },
    // {
    //   title: '媒体',
    //   key: 'levelName',
    //   dataIndex: 'levelName',
    //   align: 'center',
    // },
    {
      title: '渠道',
      key: 'channelName',
      dataIndex: 'channelName',
      align: 'center',
    },
    {
      title: '收录词条',
      key: 'totalRecord',
      dataIndex: 'totalRecord',
      align: 'center',
    },
    {
      title: '收录总分',
      key: 'totalScore',
      dataIndex: 'totalScore',
      align: 'center',
    },
  ];

  useEffect(() => {
    if (clear) {
      setSelectRankSourceIdState('');
    }
  }, [clear]);

  return (
    <ProTable<TophubRankData.RankListSo>
      ghost
      columns={columns}
      actionRef={actionRef}
      request={async (params, sorter, filter) => {
        let datahubLevelIds: string[] = [];
        if (tabKey != 'all') {
          datahubLevelIds = [tabKey];
        }
        const response = await listTophubRank({
          ...params,
          createdTimes,
          datahubLevelIds: datahubLevelIds,
        });
        return {
          data: response.data,
          success: true,
          total: response.data?.length,
        };
      }}
      rowKey="sourceId"
      headerTitle={
        <>
          <Tabs
            defaultActiveKey="all"
            tabBarGutter={16}
            items={[
              {
                key: 'all',
                label: <span>综合</span>,
              },
              {
                key: '2000',
                label: <span>市属媒体</span>,
              },
              {
                key: '3000',
                label: <span>区县媒体</span>,
              },
            ]}
            onChange={(key: string) => {
              settabKeyState(key);
              actionRef.current?.reloadAndRest();
              onReset();
            }}
          />
        </>
      }
      toolbar={{
        actions: [extra],
      }}
      options={{
        density: false,
        setting: false,
        reload: () => {
          actionRef.current?.reloadAndRest();
          onReset();
        },
      }}
      pagination={false}
      search={false}
      rowClassName={(row, index) => {
        return row.sourceId === selectRankSourceId ? styles['split-row-select-active'] : '';
      }}
      onRow={(record) => {
        return {
          onClick: () => {
            if (onSelect) {
              onSelect(record);
              setSelectRankSourceIdState(record.sourceId);
            }
          },
        };
      }}
    />
  );
};

export default ListRank;
